import { defineComponent, computed } from 'vue'
import { NFormItem } from 'naive-ui'
import { getInputValidationStatus } from '@/utils/codeSecure'
export default defineComponent({
  props: {
    val: null,
    feedback: null,
    first: null,
    ignorePathChange: null,
    label: null,
    labelAlign: null,
    labelPlacement: null,
    labelStyle: null,
    labelProps: null,
    labelWidth: null,
    path: null,
    rule: null,
    rulePath: null,
    showFeedback: null,
    showLabel: null,
    showRequireMark: null,
    requireMarkPlacement: null,
    size: null,
    validationStatus: null
  },
  setup(props: any, { slots }) {
    const params = computed(() => {
      const childerProps: any = {}
      if (props) {
        for (const propsKey in props) {
          if (
            props[propsKey] !== undefined &&
            !['validationStatus', 'feedback'].includes(propsKey)
          ) {
            childerProps[propsKey] = props[propsKey]
          }
        }
      }
      return childerProps
    })
    const inputValidationStatus = () => {
      return getInputValidationStatus(props.validationStatus, props.val)
    }
    const inputFeedback = () => {
      return getInputValidationStatus(props.feedback, props.val)
    }
    return () => (
      <NFormItem
        {...params.value}
        feedback={props.feedback ? inputFeedback : undefined}
        validationStatus={props.validationStatus ? inputValidationStatus : undefined}
      >
        {slots['default']?.()}
      </NFormItem>
    )
  }
})
